<script setup lang="ts">
  
  import {CopyDocument, Hide, Plus, Search} from "@element-plus/icons-vue";
  import {onMounted, ref} from "vue";
  import {Password} from "../../api/password.ts";
  import {ElMessage} from "element-plus";
  import {useUserStore} from "../../store/users.ts";
  
  const userStore = useUserStore()
  
  onMounted(() => {
    getCatgory()
    getPasswordData()
  })
  
  //获取分类列表
  
  const getCatgory = async () => {
    Password["getCategory"]().then((res: any) => {
      categoryList.value = res.data
    })
  }
  const categoryList: any = ref([])  //分类列表
  
  // 获取密码箱数据
  const getPasswordData = () => {
    loading.value=true
    Password["getPasswordData"](userStore.user.id).then((res: any) => {
      if(res.code===200){
        loading.value=false
      }
      // 给数据加一个字段，控制是否隐藏密码
      passwordData.value = res.data.map((item: any) => {
        item.hide = true
        item.visible = false
        return item
      })
      passwordDataCopy.value = passwordData.value
    })
  }
  const passwordData = ref([]) //密码箱数据
  const passwordDataCopy: any = ref([])  //分类列表
  
  
  //选择分类显示
  const changeCategory = (val: any) => {
    currentCategory.value = val
    emptyText.value = "当前分类下暂无数据"
    passwordData.value = passwordDataCopy.value
    if (val !== "") {
      passwordData.value = passwordData.value.filter((item: any) => item.category == val)
    }
  }
  const currentCategory = ref("")
  const emptyText = ref("")
  // 搜索
  const keyword = ref("")// 搜索关键词
  const search = () => {
    emptyText.value = "没有找到您搜索的内容"
    passwordData.value = passwordDataCopy.value
    passwordData.value = passwordData.value.filter((item: any) => item.title.includes(keyword.value))
  }
  
  // 添加密码箱
  const showDrawer = ref(false) //是否显示抽屉
  
  // 表单
  const newData: any = ref({
    id:"",
    uid:"",
    title: "",
    username: "",
    password: "",
    email: "",
    phone: "",
    other: "",
    category: null
  })
  
  //添加表单
  const addNewPassword = () => {
    if (newData.value.title === "") {
      ElMessage({
        message: "请输入标题", type: 'error'
      })
    } else if (newData.value.category === -1) {
      ElMessage({
        message: "请选择分类", type: 'error'
      })
    } else {
      newData.value.id=Date.now().toString()
      newData.value.uid=userStore.user.id
      Password["addPassword"](newData.value).then((res: any) => {
        if (res.code == 200) {
          showDrawer.value = false
          getPasswordData()
        }
      })
    }
  }
  // 抽屉关闭清空表单
  const onClose = () => {
    newData.value = {
      id:"",
      title: "",
      username: "",
      password: "",
      email: "",
      phone: "",
      other: "",
      category: -1
    }
  }
  
  // 删除密码箱
  const deletePassword = (id: number) => {
    console.log(id)
    Password["deletePassword"](id).then((res: any) => {
      if (res.code === 200) {
        passwordData.value = passwordData.value.filter((item: any) => item.id !== id)
        passwordDataCopy.value = passwordDataCopy.value.filter((item: any) => item.id !== id)
      }
    })
  }
  
  const copyData = (row: any, column: any) => {
    let value = row[column.property]
    if (value !== null && (column.property === "phone" || column.property === "email" || column.property === "username" || column.property === "other")) {
      navigator.clipboard.writeText(value).then(() => {
        ElMessage({
          message: "已复制到剪切板", type: 'info'
        })
      })
    }
  }
  const copyPassword = (value: string) => {
    navigator.clipboard.writeText(value).then(() => {
      ElMessage({
        message: "已复制到剪切板", type: 'info'
      })
    })
  }
  const loading = ref(false)
  
</script>

<template>
  <div class="box">
    <div class="actions">
      <el-button type="primary" :icon="Plus" @click="showDrawer=true"></el-button>
      <el-select
          v-model="currentCategory"
          @change="changeCategory"
          class="m-2"
          placeholder="Select"
          style="width: 240px"
      >
        <el-option
            label="全部"
            value=""
        />
        <el-option
            v-for="item in categoryList"
            :key="item.id"
            :label="item.categoryName"
            :value="item.id"
        />
      </el-select>
      <el-input
          v-model="keyword"
          placeholder="请输入关键词"
          class="input-with-select"
          @keydown.enter="search"
          clearable
          @clear="search">
        <template #append>
          <el-button :icon="Search" @keydown.enter="search"/>
        </template>
      </el-input>
    </div>
    <div class="table" v-loading="loading">
      <el-table :data="passwordData" border @row-click="(row:any,column:any)=>copyData(row,column)"
          :empty-text="emptyText">
        <el-table-column prop="title" label="平台" width="100" fixed>
          <template #default="scope">
            <el-popover placement="bottom-start" trigger="click" :visible="scope.row.visible">
              <div style="display: flex;justify-content: space-evenly">
                <el-button link @click="deletePassword(scope.row.id)" size="large">删除</el-button>
                <el-button link @click="scope.row.visible=false" size="large">取消</el-button>
              </div>
              <template #reference>
                <el-button link @click="scope.row.visible = true">{{ scope.row.title || "111" }}</el-button>
              </template>
            </el-popover>
          
          </template>
        </el-table-column>
        <el-table-column prop="username" label="账号" width="220"/>
        <el-table-column label="密码" width="200">
          <template #default="scope">
            <div class="password-row">
              <div>
                {{ scope.row.hide ? "**********" : scope.row.password }}
              </div>
              <div class="icons">
                <el-icon @click="scope.row.hide=!scope.row.hide">
                  <Hide/>
                </el-icon>
                <el-icon @click="copyPassword(scope.row.password)">
                  <CopyDocument/>
                </el-icon>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="phone" label="绑定手机" width="110"/>
        <el-table-column prop="email" label="绑定邮箱" width="200"/>
        <el-table-column prop="other" label="其他"/>
      </el-table>
    </div>
    <el-drawer
        size="40%"
        v-model="showDrawer"
        title="添加项目"
        direction="ltr"
        @closed="onClose"
    >
      <div class="new-data">
        <div class="form-item">
          <div class="title">分类</div>
          <el-select
              v-model="newData.category"
              @change="(val:any)=>newData.category=val"
              class="m-2"
              placeholder="请选择分类"
              style="width: 240px;"
          >
            <el-option
                v-for="item in categoryList"
                :key="item.id"
                :label="item.categoryName"
                :value="item.id"
            />
          </el-select>
        </div>
        <div class="form-item">
          <div class="title">标题</div>
          <el-input v-model="newData.title" placeholder="请输入 网站名称 / 游戏名称 / 银行名称 ..."></el-input>
        </div>
        <div class="form-item">
          <div class="title">用户名</div>
          <el-input v-model="newData.username" placeholder="请输入 用户名 / 卡号 ..."></el-input>
        </div>
        <div class="form-item">
          <div class="title">密码:</div>
          <el-input v-model="newData.password" type="password" show-password placeholder="请输入密码"></el-input>
        </div>
        <div class="form-item">
          <div class="title">绑定邮箱</div>
          <el-input v-model="newData.email" placeholder="请输入账户绑定的邮箱地址"></el-input>
        </div>
        <div class="form-item">
          <div class="title">绑定手机</div>
          <el-input v-model="newData.phone" placeholder="请输入账户绑定的手机号"></el-input>
        </div>
        <div class="form-item">
          <div class="title">其他</div>
          <el-input v-model="newData.other" placeholder="请输入其他用户信息"></el-input>
        </div>
        <div class="form-item">
          <el-button type="primary" @click="addNewPassword">添加</el-button>
        </div>
      
      </div>
    </el-drawer>
  </div>
</template>

<style scoped lang="scss">
  .box {
    width: 100%;
    height: 100%;
    
    .actions {
      width: 100%;
      display: flex;
      align-items: center;
      
      > * {
        margin-right: 20px;
      }
    }
    
    .table {
      width: 100%;
      margin-top: 20px;
      
      
      .password-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        
        .icons {
          > * {
            margin-left: 10px;
          }
        }
      }
    }
    
    .new-data {
      > .form-item {
        margin-bottom: 20px;
        
        .title {
          padding: 5px 0;
        }
      }
    }
  }
</style>